import React, { Component } from 'react';
import { Btndiv } from './style'



class checkbtn extends Component {

    state = {
        active: ['active', ''],
        sliderArr:['slider','slider right'],
        selected:0
    }
    setactive(index) {
        let active = this.state.active.map(item => '')
        active[index] = 'active'
            this.setState({
                active,
                selected:index
            })

        this.props.fn(index)
    }
    render() {
      
        return (
          
            <Btndiv>
                <ul>
                    <li className={this.state.active[0]} onClick={() => { this.setactive(0) }}>分类</li>
                    <li className={this.state.active[1]} onClick={() => { this.setactive(1) }}>食材</li>
                    <li className={this.state.sliderArr[this.state.selected]} ></li>
                </ul>

            </Btndiv>
          
        );
    }
}

export default checkbtn;
